'use client';

import { useEffect, useMemo, useState } from 'react';
import { AlertCircle, CheckCircle, ChevronDown } from 'lucide-react';

interface QualityProfile {
  key: string;
  label: string;
  aliases: string[];
  issues: string[];
}

interface QualityCheckProps {
  commodityName?: string;
  selectedIssues: string[];
  onChange: (issues: string[]) => void;
  noIssuesConfirmed: boolean;
  onNoIssuesChange: (confirmed: boolean) => void;
  disabled?: boolean;
  required?: boolean;
}

const grainLegumeIssues = [
  'Live insects',
  'Off-odor',
  'Discoloration',
  'Foreign matter',
  'High moisture',
  'Damaged package',
  'Mold growth',
  'No packing date',
  'No producer/packer detail',
  'Mixed grains',
  'Broken grains (> 10%)',
  'Label not in English',
  'Other(s)',
];

const QUALITY_PROFILES: QualityProfile[] = [
  {
    key: 'gari',
    label: 'Gari quality checks',
    aliases: ['gari'],
    issues: [
      'Live insects',
      'Off-odor',
      'Discoloration',
      'Foreign matter',
      'High moisture',
      'Damaged package',
      'Mold growth',
      'No packing date',
      'No producer/packer detail',
      'Label not in English',
      'Wet bags',
      'Other(s)',
    ],
  },
  {
    key: 'oils',
    label: 'Oil quality checks',
    aliases: ['vegetable oil', 'veg oil', 'palm oil', 'oil'],
    issues: [
      'Leakage',
      'Cloudy appearance',
      'Color',
      'Off-odor',
      'No label',
      'Label not in English',
      'Expiry below 1 year',
      'No producer detail',
      'No regulatory approval',
      'Other(s)',
    ],
  },
  {
    key: 'margarine',
    label: 'Margarine quality checks',
    aliases: ['margarine'],
    issues: [
      'Oil separation',
      'Discoloration',
      'Mold growth',
      'No label',
      'Label not in English',
      'Expiry below 1 year',
      'No producer detail',
      'No regulatory approval',
      'Other(s)',
    ],
  },
  {
    key: 'canned',
    label: 'Canned goods quality checks',
    aliases: ['tinned tomatoes', 'tin tomatoes', 'tomato', 'milk', 'mackerel', 'sardine'],
    issues: [
      'Swollen cans',
      'Rust',
      'Leakage',
      'No label',
      'Label not in English',
      'Expiry below 1 year',
      'No producer detail',
      'No regulatory approval',
      'Other(s)',
    ],
  },
  {
    key: 'powders',
    label: 'Dry packaged goods quality checks',
    aliases: ['flour', 'tom brown', 'hot chocolate', 'sugar'],
    issues: [
      'Foreign matter',
      'Insects',
      'Caking',
      'Off-odor',
      'Damaged package',
      'No label',
      'Label not in English',
      'Expiry below 1 year',
      'No producer detail',
      'No regulatory approval',
      'Other(s)',
    ],
  },
  {
    key: 'grains-legumes',
    label: 'Grain and legume quality checks',
    aliases: ['rice', 'maize', 'cowpea', 'soybean', 'soya', 'peanut', 'millet', 'beans'],
    issues: grainLegumeIssues,
  },
];

const DEFAULT_PROFILE: QualityProfile = {
  key: 'general',
  label: 'General quality checks',
  aliases: [],
  issues: [
    'Off-odor',
    'Discoloration',
    'Foreign matter',
    'Damaged package',
    'No label',
    'Label not in English',
    'Expiry below 1 year',
    'No producer detail',
    'Other(s)',
  ],
};

function resolveQualityProfile(commodityName?: string): QualityProfile {
  const normalized = (commodityName || '').toLowerCase().trim();
  if (!normalized) return DEFAULT_PROFILE;

  return (
    QUALITY_PROFILES.find((profile) =>
      profile.aliases.some((alias) => normalized.includes(alias) || alias.includes(normalized))
    ) || DEFAULT_PROFILE
  );
}

export function QualityCheck({
  commodityName,
  selectedIssues,
  onChange,
  noIssuesConfirmed,
  onNoIssuesChange,
  disabled = false,
  required = false,
}: QualityCheckProps) {
  const [open, setOpen] = useState(false);
  const profile = useMemo(() => resolveQualityProfile(commodityName), [commodityName]);

  useEffect(() => {
    setOpen(false);
  }, [profile.key]);

  const normalizedSelection = selectedIssues.filter((issue) => profile.issues.includes(issue));
  const selectedCount = normalizedSelection.length;

  const toggleIssue = (issue: string) => {
    if (disabled) return;
    const next = selectedIssues.includes(issue)
      ? selectedIssues.filter((item) => item !== issue)
      : [...selectedIssues, issue];
    if (!selectedIssues.includes(issue)) {
      onNoIssuesChange(false);
    }
    onChange(next.filter((item) => profile.issues.includes(item)));
  };

  const clearIssues = () => onChange([]);
  const qualityRecorded = noIssuesConfirmed || selectedCount > 0;

  if (!commodityName) return null;

  return (
    <div className="overflow-hidden rounded-2xl bg-white shadow-sm">
      <div className="border-b border-slate-100 bg-gradient-to-r from-slate-50 to-white px-4 py-3">
        <div className="flex items-center gap-2">
          {selectedCount > 0 || (required && !qualityRecorded) ? (
            <AlertCircle className="h-4 w-4 text-amber-600" />
          ) : (
            <CheckCircle className="h-4 w-4 text-emerald-600" />
          )}
          <span className="text-sm font-semibold text-slate-700">
            Quality Check {required && <span className="text-rose-500">*</span>}
          </span>
          <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-500">
            {commodityName}
          </span>
        </div>
      </div>

      <div className="p-4">
        <button
          type="button"
          onClick={() => setOpen((value) => !value)}
          disabled={disabled}
          aria-expanded={open}
          className="flex w-full items-center justify-between gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-left transition-colors hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-60"
        >
          <div className="min-w-0">
            <p className="text-sm font-semibold text-slate-800">{profile.label}</p>
            <p className="mt-0.5 text-xs text-slate-500">
              {selectedCount > 0
                ? `${selectedCount} issue${selectedCount > 1 ? 's' : ''} selected`
                : noIssuesConfirmed
                  ? 'No quality issue observed'
                  : required
                    ? 'Quality record required'
                    : 'No quality issues selected'}
            </p>
          </div>
          <ChevronDown className={`h-5 w-5 shrink-0 text-slate-500 transition-transform ${open ? 'rotate-180' : ''}`} />
        </button>

        <label
          className={`mt-3 flex min-h-11 cursor-pointer items-center gap-3 rounded-lg border px-3 py-2 text-sm transition-colors ${
            noIssuesConfirmed
              ? 'border-emerald-300 bg-emerald-50 text-emerald-900'
              : 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50'
          }`}
        >
          <input
            type="checkbox"
            checked={noIssuesConfirmed}
            onChange={(event) => {
              const checked = event.target.checked;
              onNoIssuesChange(checked);
              if (checked) {
                onChange([]);
              }
            }}
            disabled={disabled}
            className="h-4 w-4 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500"
          />
          <span>No quality issue observed</span>
        </label>

        {selectedCount > 0 && (
          <div className="mt-3 flex flex-wrap gap-2">
            {normalizedSelection.map((issue) => (
              <span key={issue} className="inline-flex items-center rounded-full bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-700 ring-1 ring-amber-200">
                {issue}
              </span>
            ))}
            <button
              type="button"
              onClick={clearIssues}
              disabled={disabled}
              className="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-200 disabled:opacity-50"
            >
              Clear
            </button>
          </div>
        )}

        {open && (
          <div className="mt-3 rounded-xl border border-slate-200 bg-white p-3">
            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
              {profile.issues.map((issue) => {
                const checked = normalizedSelection.includes(issue);
                return (
                  <label
                    key={issue}
                    className={`flex min-h-11 cursor-pointer items-center gap-3 rounded-lg border px-3 py-2 text-sm transition-colors ${
                      checked
                        ? 'border-amber-300 bg-amber-50 text-amber-900'
                        : 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50'
                    }`}
                  >
                    <input
                      type="checkbox"
                      checked={checked}
                      onChange={() => toggleIssue(issue)}
                      disabled={disabled}
                      className="h-4 w-4 rounded border-slate-300 text-amber-600 focus:ring-amber-500"
                    />
                    <span>{issue}</span>
                  </label>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}