'use client'

import dynamic from 'next/dynamic'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Chip from '@mui/material/Chip'
import CircularProgress from '@mui/material/CircularProgress'
import type { Hearing, Matter } from '@/views/dashboard/types'

const FullCalendarView = dynamic(() => import('./FullCalendarView'), {
  ssr: false,
  loading: () => (
    <Box sx={{ minHeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <CircularProgress size={24} />
    </Box>
  ),
})

const today = new Date().toISOString().split('T')[0]
const d = (n: number) => new Date(Date.now() + n * 86400000).toISOString().split('T')[0]

const HEARINGS: Hearing[] = [
  { id: 'h1', matterId: 'm1', matter: 'Smith v. Nexus — TM.7 Extension', client: 'James Smith', court: 'Civil Court Division 3', room: '4B', judge: 'Somchai Pattanarat', date: today, time: '09:30', status: 'confirmed' },
  { id: 'h2', matterId: 'm2', matter: 'Jones Immigration Appeal', client: 'Sarah Jones', court: 'Immigration Tribunal', date: d(2), time: '14:00', status: 'pending' },
  { id: 'h3', matterId: 'm3', matter: 'Rivera Visa Overstay', client: 'Carlos Rivera', court: 'Civil Court Division 1', room: '2A', judge: 'Wirut Arayachai', date: d(5), time: '10:00', status: 'confirmed' },
]

const MATTERS: Matter[] = [
  { id: 'm1', reference: 'TM.7 — Smith', client: 'James Smith', practiceArea: 'immigration', nextAction: 'Hearing', nextActionDate: today, nextActionType: 'hearing', status: 'active' },
  { id: 'm2', reference: 'BOI — Nexus Corp', client: 'Nexus Corp Ltd', practiceArea: 'corporate', nextAction: 'Filing', nextActionDate: d(5), nextActionType: 'filing', status: 'active' },
  { id: 'm3', reference: 'Visa — Tanaka K.', client: 'Kenji Tanaka', practiceArea: 'immigration', nextAction: 'Review', nextActionDate: d(8), nextActionType: 'review', status: 'active' },
  { id: 'm4', reference: 'Land — Siriwan', client: 'Siriwan Jaidee', practiceArea: 'property', nextAction: 'Deadline', nextActionDate: d(1), nextActionType: 'deadline', status: 'active' },
  { id: 'm5', reference: 'Chang Corp — Dispute', client: 'Chang Corp', practiceArea: 'civil_litigation', nextAction: 'Hearing', nextActionDate: d(12), nextActionType: 'hearing', status: 'active' },
  { id: 'm6', reference: 'Kim — Employment', client: 'Ji-woo Kim', practiceArea: 'employment', nextAction: 'Filing', nextActionDate: d(3), nextActionType: 'filing', status: 'active' },
]

const LEGEND = [
  { label: 'Hearing',  color: '#0D9394' },
  { label: 'Deadline', color: '#FF4C51' },
  { label: 'Filing',   color: '#16B1FF' },
]

export default function CalendarView() {
  const dateLabel = new Date().toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <Box>
        <Typography variant='h4' sx={{ fontWeight: 600 }}>Calendar</Typography>
        <Typography variant='body2' color='text.secondary'>{dateLabel}</Typography>
      </Box>

      <Card>
        <CardContent sx={{ p: 2, pb: '16px !important' }}>
          <Box sx={{ display: 'flex', gap: 0.75, mb: 2, flexWrap: 'wrap' }}>
            {LEGEND.map(l => (
              <Chip key={l.label} label={l.label} size='small'
                sx={{ fontSize: '0.7rem', height: 20, bgcolor: l.color + '22', color: l.color, fontWeight: 600 }} />
            ))}
          </Box>
          <FullCalendarView hearings={HEARINGS} matters={MATTERS} />
        </CardContent>
      </Card>
    </Box>
  )
}
