"use client"

/**
 * ExportDrawer — floating right-side drawer with export form.
 *
 * Built on {@link FloatingSheetPanel} — see `components/ui/floating-sheet-panel.tsx`
 * for the shared hub-adjacent sheet shell.
 *
 * Form fields (shadcn Form + react-hook-form + zod):
 *   • File format  CSV · Excel · PDF  (SelectionTileGrid radio)
 *   • Date range   From / To          (FilterTextValueInput dateMDY — same as Settings / table filters)
 *   • Columns      All · Visible only (radio)
 *   • Apply active filters            (checkbox)
 *
 * WCAG 2.1 AA:
 *   ✓ All inputs labelled via FormLabel linked to control id (1.3.1)
 *   ✓ Error messages linked via aria-describedby (3.3.1)
 *   ✓ Focus returns to trigger on close (2.4.3)
 */

import * as React from "react"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"

import { devLog } from "../../lib/dev-log"
import { Checkbox } from "./checkbox"
import { Label } from "./label"
import { RadioGroup, RadioGroupItem, RadioGroupLabel } from "./radio-group"
import { SelectionTileGrid } from "./selection-tile-grid"
import { FilterTextValueInput } from "../data-table/filter-text-value-input"
import type { SelectionTileOption } from "./selection-tile-grid"
import {
  FloatingSheetPanel,
  FloatingSheetPanelBody,
  FloatingSheetPanelContent,
  FloatingSheetPanelHeader,
  FloatingSheetPanelToolbar,
  FloatingSheetPanelWorkflowFooter,
} from "./floating-sheet-panel"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "./form"

/** Parse full MM/DD/YYYY from masked input; partial/invalid → undefined. */
function parseMdyToDate(raw: string | undefined): Date | undefined {
  if (!raw?.trim()) return undefined
  const m = raw.trim().match(/^(\d{2})\/(\d{2})\/(\d{4})$/)
  if (!m) return undefined
  const month = Number(m[1])
  const day = Number(m[2])
  const year = Number(m[3])
  if (month < 1 || month > 12 || day < 1 || day > 31) return undefined
  const d = new Date(year, month - 1, day, 12, 0, 0, 0)
  if (d.getFullYear() !== year || d.getMonth() !== month - 1 || d.getDate() !== day) return undefined
  return d
}

// ── Validation schema ─────────────────────────────────────────────────────────

const EXPORT_FORMAT_OPTIONS: SelectionTileOption<"csv" | "excel" | "pdf">[] = [
  { value: "csv",   label: "CSV",   icon: "fa-file-csv" },
  { value: "excel", label: "Excel", icon: "fa-file-excel" },
  { value: "pdf",   label: "PDF",   icon: "fa-file-pdf" },
]

const exportSchema = z
  .object({
    format:         z.enum(["csv", "excel", "pdf"]),
    columns:        z.enum(["all", "visible"]),
    dateFrom:       z.string().optional(),
    dateTo:         z.string().optional(),
    includeFilters: z.boolean(),
  })
  .superRefine((data, ctx) => {
    const from = parseMdyToDate(data.dateFrom)
    const to = parseMdyToDate(data.dateTo)
    if (data.dateFrom?.trim() && !from) {
      ctx.addIssue({ code: "custom", message: "Enter a valid from date", path: ["dateFrom"] })
    }
    if (data.dateTo?.trim() && !to) {
      ctx.addIssue({ code: "custom", message: "Enter a valid to date", path: ["dateTo"] })
    }
    if (from && to && to < from) {
      ctx.addIssue({ code: "custom", message: "End date must be after start date", path: ["dateTo"] })
    }
  })

type ExportForm = z.infer<typeof exportSchema>

// ── Component ─────────────────────────────────────────────────────────────────

export interface ExportDrawerProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  totalRows?: number
  visibleColumns?: number
}

export function ExportDrawer({
  open,
  onOpenChange,
  totalRows = 0,
  visibleColumns,
}: ExportDrawerProps) {
  const form = useForm<ExportForm>({
    resolver: zodResolver(exportSchema),
    defaultValues: {
      format:         "csv",
      columns:        "visible",
      dateFrom:       "",
      dateTo:         "",
      includeFilters: true,
    },
  })

  const [isExporting, setIsExporting] = React.useState(false)

  async function onSubmit(values: ExportForm) {
    setIsExporting(true)
    await new Promise(r => setTimeout(r, 1200))
    devLog("Export:", {
      ...values,
      dateFrom: parseMdyToDate(values.dateFrom)?.toISOString(),
      dateTo:   parseMdyToDate(values.dateTo)?.toISOString(),
    })
    setIsExporting(false)
    onOpenChange(false)
    form.reset()
  }

  return (
    <FloatingSheetPanel open={open} onOpenChange={onOpenChange}>
      <FloatingSheetPanelContent contentSlot="export-drawer">
        <FloatingSheetPanelToolbar />
        <FloatingSheetPanelHeader
          title="Export data"
          description={`${totalRows} record${totalRows !== 1 ? "s" : ""} available for export.`}
        />

        <Form {...form}>
          <form
            id="export-form"
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex min-h-0 flex-1 flex-col"
          >
            <FloatingSheetPanelBody className="px-4 pb-4 space-y-5">

              {/* File format */}
              <FormField
                control={form.control}
                name="format"
                render={({ field }) => (
                  <FormItem>
                    <FormControl>
                      <SelectionTileGrid
                        sectionLabel="File format"
                        options={EXPORT_FORMAT_OPTIONS}
                        columns={3}
                        value={field.value}
                        onValueChange={field.onChange}
                        interaction="radio"
                        idPrefix="export-fmt"
                        itemVariant="outline"
                        itemMotion="pop"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Date range */}
              <fieldset className="space-y-2">
                <legend className="text-sm font-medium leading-none mb-2">
                  Date range{" "}
                  <span className="text-muted-foreground font-normal">(optional)</span>
                </legend>
                <div className="grid grid-cols-2 gap-3">
                  <FormField
                    control={form.control}
                    name="dateFrom"
                    render={({ field }) => (
                      <FormItem className="gap-1">
                        <FormLabel htmlFor="export-date-from" className="text-xs text-muted-foreground">
                          From
                        </FormLabel>
                        <FormControl>
                          <FilterTextValueInput
                            id="export-date-from"
                            mask="dateMDY"
                            aria-label="Export from date (optional)"
                            placeholder="MM/DD/YYYY"
                            value={field.value ?? ""}
                            onValueChange={field.onChange}
                            className="h-8 text-sm"
                          />
                        </FormControl>
                        <FormDescription className="text-xs">MM/DD/YYYY</FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="dateTo"
                    render={({ field }) => (
                      <FormItem className="gap-1">
                        <FormLabel htmlFor="export-date-to" className="text-xs text-muted-foreground">
                          To
                        </FormLabel>
                        <FormControl>
                          <FilterTextValueInput
                            id="export-date-to"
                            mask="dateMDY"
                            aria-label="Export to date (optional)"
                            placeholder="MM/DD/YYYY"
                            value={field.value ?? ""}
                            onValueChange={field.onChange}
                            className="h-8 text-sm"
                          />
                        </FormControl>
                        <FormDescription className="text-xs">MM/DD/YYYY</FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              </fieldset>

              {/* Columns */}
              <FormField
                control={form.control}
                name="columns"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="text-sm font-medium">Columns</FormLabel>
                    <FormControl>
                      <RadioGroup
                        value={field.value}
                        onValueChange={field.onChange}
                        className="space-y-1.5 mt-1"
                        itemVariant="outline"
                        itemMotion="pop"
                      >
                        {([
                          { value: "all",     label: "All columns",          sub: null },
                          { value: "visible", label: "Visible columns only", sub: visibleColumns !== undefined ? `${visibleColumns} columns` : null },
                        ] as const).map(opt => (
                          <div
                            key={opt.value}
                            className="flex items-center gap-2.5 rounded-lg border border-border px-3 py-2.5 transition-colors hover:bg-interactive-hover has-[[data-state=checked]]:border-brand has-[[data-state=checked]]:bg-brand/10 cursor-pointer"
                          >
                            <RadioGroupItem value={opt.value} id={`col-${opt.value}`} />
                            <RadioGroupLabel
                              htmlFor={`col-${opt.value}`}
                              className="min-h-0 flex-1 cursor-pointer py-0 text-sm font-normal leading-none"
                            >
                              {opt.label}
                              {opt.sub && (
                                <span className="text-muted-foreground ms-1.5 font-normal">({opt.sub})</span>
                              )}
                            </RadioGroupLabel>
                          </div>
                        ))}
                      </RadioGroup>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Include filters */}
              <FormField
                control={form.control}
                name="includeFilters"
                render={({ field }) => (
                  <FormItem>
                    <div className="flex items-start gap-3 rounded-lg border border-border px-3 py-2.5 transition-colors hover:bg-interactive-hover has-[[data-state=checked]]:border-primary">
                      <FormControl>
                        <Checkbox
                          id="include-filters"
                          checked={field.value}
                          onCheckedChange={field.onChange}
                          className="mt-0.5 shrink-0"
                        />
                      </FormControl>
                      <div className="min-w-0">
                        <Label htmlFor="include-filters" className="text-sm cursor-pointer font-medium leading-none">
                          Apply active filters
                        </Label>
                        <p className="text-xs text-muted-foreground mt-1">
                          Export only rows matching current filters
                        </p>
                      </div>
                    </div>
                    <FormMessage />
                  </FormItem>
                )}
              />

            </FloatingSheetPanelBody>
          </form>
        </Form>

        <FloatingSheetPanelWorkflowFooter
          onCancel={() => onOpenChange(false)}
          primaryForm="export-form"
          primaryLabel="Export"
          onPrimary={() => form.handleSubmit(onSubmit)()}
          primaryDisabled={isExporting}
          primaryLoading={isExporting}
          primaryLoadingLabel="Exporting…"
        />
      </FloatingSheetPanelContent>
    </FloatingSheetPanel>
  )
}