import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import type { OverviewDashboardData } from '@/features/overview/server/overview-data';

export function OverviewFilterPanel({
  data
}: {
  data: OverviewDashboardData;
}) {
  const isAdmin = data.role === 'owner' || data.role === 'admin';

  return (
    <Card>
      <CardHeader className='pb-3'>
        <CardTitle>ตัวกรองแดชบอร์ด</CardTitle>
        <CardDescription>
          {isAdmin
            ? 'กรองข้อมูลตามปี บริษัท และแผนก เพื่อดูภาพรวมการอบรมในมุม HRD'
            : 'เลือกปีที่ต้องการดูสรุปผลการอบรมของคุณ'}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form className='grid gap-3 md:grid-cols-2 xl:grid-cols-4' method='GET'>
          <label className='flex min-w-0 flex-col gap-2 text-sm'>
            <span className='font-medium'>ปี</span>
            <select
              name='year'
              defaultValue={String(data.filters.year)}
              className='border-input bg-background h-9 rounded-md border px-3 text-sm shadow-xs'
            >
              {data.options.years.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </label>

          {isAdmin ? (
            <>
              <label className='flex min-w-0 flex-col gap-2 text-sm'>
                <span className='font-medium'>บริษัท</span>
                <select
                  name='company'
                  defaultValue={data.filters.company ?? ''}
                  className='border-input bg-background h-9 rounded-md border px-3 text-sm shadow-xs'
                >
                  <option value=''>ทุกบริษัท</option>
                  {data.options.companies.map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
              </label>

              <label className='flex min-w-0 flex-col gap-2 text-sm'>
                <span className='font-medium'>แผนก</span>
                <select
                  name='department'
                  defaultValue={data.filters.departmentId ? String(data.filters.departmentId) : ''}
                  className='border-input bg-background h-9 rounded-md border px-3 text-sm shadow-xs'
                >
                  <option value=''>ทุกแผนก</option>
                  {data.options.departments.map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
              </label>
            </>
          ) : null}

          <div className='flex min-w-0 flex-col gap-2 sm:flex-row sm:items-end xl:col-span-1'>
            <Button type='submit' className='w-full sm:w-auto'>
              ใช้งานตัวกรอง
            </Button>
            <Button asChild variant='outline' className='w-full sm:w-auto'>
              <Link href='/dashboard/overview'>ล้างค่า</Link>
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}
