import React, { useState } from 'react';
import { LegalCase } from '../types';

interface ShareModalProps {
  legalCase: LegalCase;
  onClose: () => void;
}

export const ShareModal: React.FC<ShareModalProps> = ({ legalCase, onClose }) => {
  const [accessLevel, setAccessLevel] = useState<'view' | 'edit'>('view');
  const [copied, setCopied] = useState(false);
  const shareUrl = `https://caseloop.civic.internal/f/${legalCase.id}?token=sec_7f991b`;

  const handleCopy = () => {
    navigator.clipboard.writeText(shareUrl);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-xs flex items-center justify-center p-4 z-50 animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-[#E2E8F0] flex flex-col gap-5">
        <div className="flex justify-between items-center pb-3 border-b border-[#E2E8F0]">
          <div className="flex items-center gap-2">
            <span className="material-symbols-outlined text-[#006c4a] text-[22px]">share</span>
            <h3 className="font-headline font-bold text-[18px] text-[#0F172A]">
              Share Secure Legal Filing
            </h3>
          </div>
          <button
            onClick={onClose}
            className="text-[#64748B] hover:text-[#0F172A] p-1"
          >
            <span className="material-symbols-outlined">close</span>
          </button>
        </div>

        <div className="text-[13px] text-[#475569]">
          Generate an encrypted access link for legal co-counsel, legal aid clinics, or ombudsman review.
        </div>

        {/* Case preview pill */}
        <div className="bg-[#F8FAFC] border border-[#E2E8F0] rounded-lg p-3 flex items-center gap-3">
          <div className="w-8 h-8 rounded bg-[#0F172A] text-white flex items-center justify-center text-[13px] font-bold">
            CL
          </div>
          <div className="min-w-0 flex-1">
            <div className="font-headline font-bold text-[14px] text-[#0F172A] truncate">
              {legalCase.title}
            </div>
            <div className="text-[11px] text-[#64748B]">
              {legalCase.caseNumber} • {legalCase.category}
            </div>
          </div>
        </div>

        {/* Access level */}
        <div className="flex flex-col gap-1.5">
          <label className="text-[12px] font-bold text-[#475569] uppercase tracking-wider">
            Permission Level
          </label>
          <div className="grid grid-cols-2 gap-2">
            <button
              onClick={() => setAccessLevel('view')}
              className={`p-2.5 rounded-lg border text-left text-[12.5px] transition-colors cursor-pointer ${
                accessLevel === 'view'
                  ? 'border-[#0F172A] bg-[#F1F5F9] font-semibold text-[#0F172A]'
                  : 'border-[#CBD5E1] text-[#64748B] hover:bg-[#F8FAFC]'
              }`}
            >
              <div className="flex items-center gap-1.5">
                <span className="material-symbols-outlined text-[16px]">visibility</span>
                <span>View & Verify</span>
              </div>
              <p className="text-[11px] text-[#64748B] mt-1 font-normal">
                Can inspect draft & verify statutory citations
              </p>
            </button>

            <button
              onClick={() => setAccessLevel('edit')}
              className={`p-2.5 rounded-lg border text-left text-[12.5px] transition-colors cursor-pointer ${
                accessLevel === 'edit'
                  ? 'border-[#0F172A] bg-[#F1F5F9] font-semibold text-[#0F172A]'
                  : 'border-[#CBD5E1] text-[#64748B] hover:bg-[#F8FAFC]'
              }`}
            >
              <div className="flex items-center gap-1.5">
                <span className="material-symbols-outlined text-[16px]">edit</span>
                <span>Co-Drafting</span>
              </div>
              <p className="text-[11px] text-[#64748B] mt-1 font-normal">
                Can add clauses, adjust facts & export PDF
              </p>
            </button>
          </div>
        </div>

        {/* Link box */}
        <div className="flex items-center gap-2">
          <input
            type="text"
            readOnly
            value={shareUrl}
            className="w-full bg-[#F8FAFC] border border-[#CBD5E1] rounded-lg p-2.5 text-[12px] text-[#334155] font-mono select-all"
          />
          <button
            onClick={handleCopy}
            className="bg-[#0F172A] hover:bg-[#1E293B] text-white text-[13px] font-medium px-4 py-2.5 rounded-lg flex items-center gap-1.5 transition-colors cursor-pointer flex-shrink-0"
          >
            <span className="material-symbols-outlined text-[16px]">
              {copied ? 'check' : 'content_copy'}
            </span>
            <span>{copied ? 'Copied' : 'Copy'}</span>
          </button>
        </div>

        <div className="flex items-center gap-1 text-[11px] text-[#059669]">
          <span className="material-symbols-outlined text-[14px]">lock</span>
          <span>Link expires in 72 hours. All PII masked by default.</span>
        </div>
      </div>
    </div>
  );
};