'use client';

import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { FiSave } from 'react-icons/fi';
import { updateReportHeader } from '@/lib/api/audit-report-builder.api';
import type {
  Conclusion,
  ReportExtras,
  Stage1Recommendation,
} from '@/lib/api/types/audit-report-builder.types';
import type { PanelProps } from './panelTypes';

export default function ConclusionPanel({ model, canEdit, onDirty }: PanelProps) {
  const isStage1 = model.report.stage_type === 'stage1';
  const [conclusion, setConclusion] = useState<Conclusion | null>(model.report.conclusion);
  const [recommendation, setRecommendation] = useState<Stage1Recommendation | null>(model.report.recommendation);
  const [nextDate, setNextDate] = useState(model.report.next_audit_date?.slice(0, 10) ?? '');
  const [extras, setExtras] = useState<ReportExtras>({
    declarations: [],
    attachments: [],
    change_detail: {},
    ...model.extras,
  });
  const [saving, setSaving] = useState(false);

  const touch = () => onDirty('conclusion', true);
  const setEx = (p: Partial<ReportExtras>) => {
    setExtras((prev) => ({ ...prev, ...p }));
    touch();
  };
  const toggleIn = (list: 'declarations' | 'attachments', key: string) => {
    const cur = (extras[list] as string[]) ?? [];
    setEx({ [list]: cur.includes(key) ? cur.filter((k) => k !== key) : [...cur, key] });
  };
  const setChange = (key: string, value: any) => setEx({ change_detail: { ...(extras.change_detail ?? {}), [key]: value } });

  const save = async () => {
    setSaving(true);
    try {
      await updateReportHeader(model.report.id, {
        conclusion: conclusion ?? undefined,
        recommendation: isStage1 ? recommendation : undefined,
        next_audit_date: nextDate || null,
        // disabled_clauses / hidden_standards are saved by the Clauses / Details panels; this panel's copy may be old,
        // so it never sends them (the server keeps the stored value)
        extras: Object.fromEntries(Object.entries(extras).filter(([k]) => k !== 'disabled_clauses' && k !== 'hidden_standards')) as ReportExtras,
      });
      onDirty('conclusion', false);
      toast.success('Conclusion saved');
    } catch (e: any) {
      toast.error(e.message || 'Save failed');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div>
      {/* Conclusion / recommendation */}
      <div className="rb-card">
        <div className="rb-card-head">
          <h3 className="rb-card-title">
            <span className="rb-card-bar" /> {isStage1 ? 'Conclusion & Recommendation (cover page)' : 'Audit Conclusion'}
          </h3>
        </div>
        conclusio        {model.options.conclusion.map((o) => (
          <label key={o.key} className={`rb-radio-card${conclusion === o.key ? ' on' : ''}`}>
            <input type="radio" name="concl" disabled={!canEdit} checked={conclusion === o.key} onChange={() => { setConclusion(o.key); touch(); }} />
            <span>{o.text}</span>
          </label>
        ))}
        {isStage1 && (
          <>
            <div className="rb-card-head" style={{ marginTop: 14 }}>
              <h3 className="rb-card-title"><span className="rb-card-bar" /> Stage 2 Recommendation (section 12)</h3>
            </div>
            {model.options.stage1_recommendation.map((o) => (
              <label key={o.key} className={`rb-radio-card${recommendation === o.key ? ' on' : ''}`}>
                <input type="radio" name="reco" disabled={!canEdit} checked={recommendation === o.key} onChange={() => { setRecommendation(o.key); touch(); }} />
                <span>{o.text}</span>
              </label>
            ))}
          </>
        )}n: conclusion ?? undefined,
        <div className="rb-field" style={{ maxWidth: 260, marginTop: 10 }}>
          <label className="rb-label">Next audit date</label>
          <input type="date" className="rb-input" disabled={!canEdit} value={nextDate} onChange={(e) => { setNextDate(e.target.value); touch(); }} />
        </div>
      </div>

      {/* Declarations */}
      <div className="rb-card">
        <div className="rb-card-head">
          <h3 className="rb-card-title"><span className="rb-card-bar" /> Auditor Declarations</h3>
        </div>
        {model.options.declarations.map((d) => (
          <label className="rb-check" key={d.key}>
            <input type="checkbox" disabled={!canEdit} checked={(extras.declarations ?? []).includes(d.key)} onChange={() => toggleIn('declarations', d.key)} />
            <span>{d.text}</span>
          </label>
        ))}
      </div>

      {/* Change detail (non-stage-1) */}
      {!isStage1 && (
        <div className="rb-card">
          <div className="rb-card-head">
            <h3 className="rb-card-title"><span className="rb-card-bar" /> Change Details</h3>
          </div>
          <div className="rb-grid">
            {model.options.change_detail.map((q) => {
              const cur = extras.change_detail?.[q.key];
              return (
                <div className="rb-field" key={q.key}>
                  <label className="rb-label">{q.label}</label>
                  {q.kind === 'yesno' ? (
                    <select className="rb-select" disabled={!canEdit} value={typeof cur === 'string' ? cur : ''} onChange={(e) => setChange(q.key, e.target.value)}>
                      <option value="">— select —</option>
                      <option value="yes">Yes</option>
                      <option value="no">No</option>
                    </select>
                  ) : (
                    <>
                      <select className="rb-select" disabled={!canEdit} value={cur?.value ?? ''} onChange={(e) => setChange(q.key, { ...(cur ?? {}), value: e.target.value })}>
                        <option value="">— select —</option>
                        <option value="none">None</option>
                        <option value="yes">Yes (specify)</option>
                      </select>
                      {cur?.value === 'yes' && (
                        <input className="rb-input" disabled={!canEdit} placeholder="Specify" value={cur?.note ?? ''} onChange={(e) => setChange(q.key, { ...cur, note: e.target.value })} />
                      )}
                    </>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* Mark use */}
      <div className="rb-card">
        <div className="rb-card-head">
          <h3 className="rb-card-title"><span className="rb-card-bar" /> Use of Certification Mark</h3>
        </div>
        {model.options.mark_use.map((m) => (
          <label key={m.key} className={`rb-radio-card${extras.mark_use === m.key ? ' on' : ''}`}>
            <input type="radio" name="markuse" disabled={!canEdit} checked={extras.mark_use === m.key} onChange={() => setEx({ mark_use: m.key })} />
            <span>{m.text}</span>
          </label>
        ))}
        {extras.mark_use === 'm3' && (
          <div className="rb-field" style={{ maxWidth: 260 }}>
            <label className="rb-label">NC number</label>
            <input className="rb-input" disabled={!canEdit} value={extras.mark_use_nc_no ?? ''} onChange={(e) => setEx({ mark_use_nc_no: e.target.value })} />
          </div>
        )}
      </div>

      {/* Improvement */}
      <div className="rb-card">
        <div className="rb-card-head">
          <h3 className="rb-card-title"><span className="rb-card-bar" /> Improvement</h3>
        </div>
        <div className="rb-field" style={{ maxWidth: 320 }}>
          <select className="rb-select" disabled={!canEdit} value={extras.improvement ?? ''} onChange={(e) => setEx({ improvement: (e.target.value || undefined) as any })}>
            <option value="">— select —</option>
            <option value="modification">Modification suggested</option>
            <option value="none">No modification</option>
          </select>
        </div>
        {model.report.stage_type === 'surveillance' && (
          <div className="rb-field">
            <label className="rb-label">Surveillance cycle</label>
            <select className="rb-select" disabled={!canEdit} value={String(extras.surveillance_no ?? 1)} onChange={(e) => setEx({ surveillance_no: Number(e.target.value) as 1 | 2 })}>
              <option value="1">Surveillance 1</option>
              <option value="2">Surveillance 2</option>
            </select>
          </div>
        )}
      </div>

      {/* Attachments */}
      <div className="rb-card">
        <div className="rb-card-head">
          <h3 className="rb-card-title"><span className="rb-card-bar" /> Attachments</h3>
        </div>
        {model.options.attachments.map((a) => a.heading ? (
          <div key={a.key} style={{ fontWeight: 700, fontSize: 12, margin: '10px 0 4px', color: '#0a2a5e' }}>{a.text}</div>
        ) : (
          <label className="rb-check" key={a.key}>
            <input type="checkbox" disabled={!canEdit} checked={(extras.attachments ?? []).includes(a.key)} onChange={() => toggleIn('attachments', a.key)} />
            <span>{a.text}</span>
          </label>
        ))}
      </div>

      {canEdit && (
        <div className="rb-savebar">
          <button className="rb-btn rb-btn-primary" onClick={save} disabled={saving}>
            <FiSave size={14} /> {saving ? 'Saving…' : 'Save Conclusion'}
          </button>
        </div>
      )}
    </div>
  );
}