import { CheckCircle, ChevronDown, ChevronUp, Edit3, Trash2 } from 'lucide-react';

import type { PolicyViewModel } from '@/business/policies/types';
import { Button } from '@/components/ui/button';
import { POLICY_CATEGORY_COLORS } from '@/shared/constants/policies';
import { PolicyCategoryIcon } from '@/components/policies/PolicyCategoryIcon';
import { PolicyForm } from '@/components/policies/PolicyForm';
import type { PoliciesViewProps } from '@/components/policies/types';

interface PolicyCardProps extends PoliciesViewProps {
  readonly policy: PolicyViewModel;
}

export function PolicyCard({ policy, state, actions }: PolicyCardProps) {
  const isEditing = state.editingPolicyId === policy.id;
  const isExpanded = state.expandedPolicyId === policy.id;
  const isAcknowledged = state.acknowledgedPolicyIds.has(policy.id);

  if (isEditing) {
    return (
      <PolicyForm
        title="Edit Policy"
        draft={state.editDraft}
        submitLabel="Save"
        submitting={state.isUpdating}
        disabled={state.isMutating}
        onChange={actions.updateEditDraft}
        onSubmit={() => {
          void actions.submitEditPolicy(policy.id);
        }}
        onCancel={actions.cancelEditingPolicy}
      />
    );
  }

  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 overflow-hidden hover:border-slate-600/50 transition-all">
      <Button
        type="button"
        onClick={() => actions.togglePolicyExpanded(policy.id)}
        className="w-full h-auto rounded-none px-5 py-4 flex items-center justify-between bg-transparent hover:bg-slate-700/20 transition-colors text-inherit"
      >
        <div className="flex items-center gap-3">
          <div className={`w-10 h-10 rounded-xl flex items-center justify-center border ${POLICY_CATEGORY_COLORS[policy.category]}`}>
            <PolicyCategoryIcon category={policy.category} />
          </div>
          <div className="text-left">
            <h3 className="font-semibold text-white text-sm">{policy.title}</h3>
            <div className="flex items-center gap-2 mt-0.5">
              <span className={`px-2 py-0.5 rounded text-[10px] font-semibold border ${POLICY_CATEGORY_COLORS[policy.category]}`}>{policy.category}</span>
              <span className="text-[10px] text-slate-500">Updated {policy.lastUpdated} by {policy.updatedBy}</span>
            </div>
          </div>
        </div>
        <div className="flex items-center gap-3">
          {isAcknowledged && (
            <span className="px-2.5 py-1 bg-emerald-500/20 text-emerald-400 rounded-lg text-[10px] font-semibold border border-emerald-500/20">ACKNOWLEDGED</span>
          )}
          {isExpanded ? <ChevronUp size={18} className="text-slate-400" /> : <ChevronDown size={18} className="text-slate-400" />}
        </div>
      </Button>
      {isExpanded && (
        <div className="px-5 pb-5 space-y-4">
          <div className="bg-slate-700/30 rounded-xl p-4 border border-slate-600/30">
            <p className="text-sm text-slate-300 leading-relaxed whitespace-pre-wrap">{policy.content}</p>
          </div>
          <div className="flex items-center gap-2 flex-wrap">
            <Button
              type="button"
              onClick={() => actions.toggleAcknowledgement(policy.id)}
              leadingIcon={<CheckCircle size={14} />}
              className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-all ${
                isAcknowledged
                  ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 hover:bg-emerald-500/30'
                  : 'bg-violet-500/20 text-violet-300 border border-violet-500/30 hover:bg-violet-500/30'
              }`}
            >
              {isAcknowledged ? 'Acknowledged' : 'I Have Read and Understand This Policy'}
            </Button>
            {state.canManage && (
              <>
                <Button
                  type="button"
                  onClick={() => actions.startEditingPolicy(policy.id)}
                  leadingIcon={<Edit3 size={12} />}
                  className="flex items-center gap-1.5 px-3 py-2.5 bg-slate-700/50 text-slate-300 rounded-xl text-xs font-medium hover:bg-slate-600/50 transition-colors border border-slate-600/30"
                >
                  Edit
                </Button>
                <Button
                  type="button"
                  onClick={() => {
                    void actions.deletePolicy(policy.id);
                  }}
                  disabled={state.isDeleting}
                  loading={state.isDeleting}
                  leadingIcon={<Trash2 size={12} />}
                  className="flex items-center gap-1.5 px-3 py-2.5 bg-red-500/10 text-red-400 rounded-xl text-xs font-medium hover:bg-red-500/20 transition-colors border border-red-500/20 disabled:opacity-50"
                >
                  Delete
                </Button>
              </>
            )}
          </div>
        </div>
      )}
    </div>
  );
}
